<template>
    <div class="header">
        <el-tabs v-bind="$attrs">
            <el-tab-pane name="1">
                <template #label>
                    <div class="label_box">
                        <div class="step_num">1</div>
                        <div>基础设置</div>
                    </div>
                </template>
            </el-tab-pane>
            <el-tab-pane name="2">
                <template #label>
                    <div class="label_box">
                        <div class="step_num">2</div>
                        <div>商品详情</div>
                    </div>
                </template>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style lang="scss" scoped>
:deep(.el-tabs__header) {
    margin-bottom: 0;
}
:deep(.el-tabs__item) {
    margin-right: 128px;
    &:hover {
        cursor: default;
        .step_num {
            background: #fa6a0a !important;
            color: #ffffff !important;
        }
    }
}
.is-active > .label_box > .step_num {
    background: #fa6a0a !important;
    color: #ffffff !important;
}
:deep(.el-tabs__nav-wrap::after) {
    background-color: #fff;
}
.header {
    padding: 5px 0 1px 24px;
    margin-bottom: 16px;
    background-color: #fff;
    .label_box {
        display: flex;
        align-items: center;
        .step_num {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-right: 8px;
            border-radius: 50%;
            background: #eaeaea;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
        }
    }
}
</style>
